<template>
  <div>
    <h1>computed的使用</h1>
    <h1 v-text="num"></h1>
    <button @click="num++">自增</button>
    <h2>{{ total }}</h2>
    <h2>{{ total }}</h2>
    <h2>{{ total }}</h2>
    <input type="text" v-model.number="total" />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
let num = ref(10);

// 对响应式变量进行缓存计算。
// 语法：const c = computed(fn / {get, set})
// let total = computed(() => {
//   return 666;
// });

let total = computed({
  get() {
    console.log("get...");
    return num.value * 10;
  },
  set(val) {
    console.log("--val:", val);
    num.value = val / 10;
  },
});
</script>

<style lang="scss" scoped>
</style>